<template>
  <div class="main_center column-flex">
    <!-- 顶部 -->
    <div class="box top">
      <div class="t-title">
        <span>历史告警</span>
      </div>
      <el-row>
        <el-col :span="6" class="flex">
          <img src="@/assets/images/main/icon1@2x.png" alt="" />
          <div class="cont">
            <h2>{{alarmObj.totalAlarmNum}} <span>个</span></h2>
            <p>告警文件</p>
          </div>
        </el-col>
      
        <el-col :span="6" class="flex">
          <img src="@/assets/images/main/icon2@2x.png" alt="" />
          <div class="cont">
            <h2>{{alarmObj.violationAlarmNum}} <span>个</span></h2>
            <p>违规文件</p>
          </div>
        </el-col>
        <el-col :span="6" class="flex">
          <img src="@/assets/images/main/icon3@2x.png" alt="" />
          <div class="cont">
            <h2>{{alarmObj.rectifiedNum}} <span>个</span></h2>
            <p>已整改</p>
          </div>
        </el-col>
        <el-col :span="6" class="flex">
          <img src="@/assets/images/main/icon4@2x.png" alt="" />
          <div class="cont">
            <h2>{{alarmObj.disposedNum}} <span>个</span></h2>
            <p>已处置</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 中间部分 -->
    <div class="center">
<warning-today :alarmObj="alarmObj"/>
    </div>
    <!-- 底部 -->
    <div class="box bottom">
      <h1 class="left-title">
        <div>告警违规趋势</div>
        <el-radio-group v-model="type" size="mini" @change="changeType">
          <el-radio-button label="halfMonth">按日(近15天)</el-radio-button>
          <el-radio-button label="year">按月</el-radio-button>
        </el-radio-group>
      </h1>
      <violation-trend class="trend" ref="trend" />
    </div>
  </div>
</template>

<script>
import ViolationTrend from "./moduleComponments/violationTrend.vue";

import { violationAlarm,riskReminder } from "@/api/mainPage";
import WarningToday from './moduleComponments/warningToday.vue';

export default {
  components: { ViolationTrend, WarningToday },
  data() {
    return {
      type: "halfMonth",
      alarmObj: {
        alarmYesterday: '',
        violationYesterday:''
      }
    };
  },
  methods: {
    // 历史告警
    riskReminder() {
      riskReminder().then(res => {
  this.alarmObj=res
      })
    },
    // 切换echarts
    changeType() {
      violationAlarm(this.type).then((res) => {
        let dayArr = res.map((item) => {
          return item.dayText;
        });
        let alarmArr = res.map((item) => {
          return item.alarmNum;
        });
        let violationArr = res.map((item) => {
          return item.violationNum;
        });
        let obj = {
          dayArr,
          list: [
            {
              name: "违规",
              data: alarmArr,
            },
            {
              name: "告警",
              data: violationArr,
            },
          ],
        };
        this.$refs.trend.getData(obj);
      });
    },
  },
  mounted() {
    this.changeType();
    this.riskReminder()
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 11%;
  padding: 0 2.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .t-title {
    height: 1.875rem;
    display: flex;
    justify-content: center;
   margin-bottom: .625rem;
    span {
      width: 12.5rem;
      display: flex;
      align-items: center;
      font-size: 1.125rem;
      justify-content: center;
      font-weight: 600;
      padding: 1.25rem;
      background: url(../../../assets/images/main/tit-bg3@2x.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .el-row {
    flex: 1;
    display: flex;
    .el-col {
      height: 100%;
      font-size: 0.875rem;
      img {
        width: 3rem;
        max-height: 100%;
        margin-right: 0.9375rem;
      }
      .cont {
        h2 {
          text-align: left;
          margin-bottom: 0.3125rem;
          font-size: 1.5rem ;
          color: #279dff;
          font-weight: 500;
          span{
            color: #fff;
            font-weight: normal;
            font-size: .625rem;
          }
        }
      }
    }
  }
}
.center {
  height: 58%;
  padding: 2.5rem 1.25rem .625rem ;
}
.bottom {
  height: 28%;
  display: flex;
  flex-direction: column;
  h1.left-title {
    padding: 0.625rem 3.125rem 0.625rem 2.5rem;
  }
}
.trend{
  padding: .625rem;
}
</style>
